<script lang="ts" setup>
import { ref } from "vue";
import VueAMap, { initAMapApiLoader } from "@vuemap/vue-amap";
import { lazyAMapApiLoaderInstance } from "@vuemap/vue-amap";
import { useMainStore } from "@/store";
//@ts-ignore
import { convertCoords } from "coordinates_convert";
const store = useMainStore();
const visible = ref(false);
const zoom = ref(10);
const center = ref([120.213112, 30.255035]);
const pos = ref([120.213112, 30.255035]);
const startPos = ref([120.313112, 30.355035]);
const emits = defineEmits(["change", "close"]);
const address = ref("");
const showMap = ref(true);
let myMap: any;
const onMapClick = (e: any) => {
  console.log(e);
  pos.value = [e.lnglat.lng, e.lnglat.lat];
  refresh();
  setTimeout(() => {
    searchDriving();
  }, 1000);
};
const selectPoi = (e: any) => {
  console.log("selectPoi: ", e);
  pos.value = [e.poi.location.lng, e.poi.location.lat];
  address.value = e.poi.district + e.poi.address + e.poi.name;
};
const choosePoi = (e: any) => {
  console.log("choosePoi: ", e);
};
const reset = () => {
  pos.value = [120.213112, 30.255035];
  address.value = "";
};
const submit = () => {
  emits("change", { address: address.value, pos: pos.value });
  visible.value = false;
};
const init = (map) => {
  myMap = map;
  console.log("map init", map);
};
let lineResult = [];
const searchDriving = () => {
  let _window: any = window;
  _window.AMap.plugin("AMap.Driving", function () {
    console.log("map", myMap);
    var driving = new _window.AMap.Driving({
      // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
      // policy: AMap.DrivingPolicy.LEAST_TIME,
      map: myMap, //AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选 ps:此处必须有 不然不知道在哪个地图上
      showTraffic: true, //设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
      hideMarkers: true, //设置隐藏路径规划的起始点图标 设置为true
    });
    console.log(driving);
    driving.search(startPos.value, pos.value, function (status, result) {
      console.log(status, result);
      const tmpResult = result.routes[0].steps.map((step) =>
        step.path.map((path) => {
          const pos = convertCoords([path.lng, path.lat], "gcj02", "wgs84");
          return {
            longtitude: pos[0],
            latitude: pos[1],
          };
        })
      );
      lineResult = [];
      tmpResult.forEach((item) => {
        lineResult.push(...item);
      });
      // lineResult.forEach(item=>{
      //   it
      // })
      // for (let i = 0; i < lineResult.length; i++) {
      //   lineResult[i] = ;
      // }
      console.log(lineResult);
    });
  });
};
const refresh = () => {
  showMap.value = false;
  setTimeout(() => (showMap.value = true));
};
const genLine = () => {
  // emits("change", { address: address.value, pos: pos.value });
  store.$patch({
    guidLine: {
      id: 5,
      properties: { color: "#ffffff", width: 5 },
      content: lineResult,
    },
  });
  console.log(store.guidLine);
  emits("close");
};
// const zoom = ref(10);
// const center = ref([120.213112, 30.255035]);
</script>

<template>
  <div class="map-wrapper">
    <el-amap
      id="amap"
      :zoom="zoom"
      :center="center"
      @init="init"
      @click="onMapClick"
      v-if="showMap"
    >
      <el-amap-control-geolocation :visible="true" />
      <el-amap-marker
        :position="pos"
        draggable
        :offset="[-1, -1]"
        icon="https://xunjinasd.oss-cn-hangzhou.aliyuncs.com/app/space/a7b6568535604e4a8443dbdf0cda694c_%E5%9B%BE%E6%A0%87_%E8%B5%B7%E7%82%B9_%E8%93%9D%E8%89%B2.png"
      />
      <el-amap-marker
        :position="startPos"
        :offset="[-1, -1]"
        :anchor="['bottom-center']"
        icon="https://xunjinasd.oss-cn-hangzhou.aliyuncs.com/app/space/44651be56f0a4d5180b9c0e027692363_013_%E9%A3%8E%E9%99%A9%E4%BA%8B%E4%BB%B6.png"
      />

      <el-amap-search-box
        :visible="true"
        @select="selectPoi"
        @choose="choosePoi"
      />
    </el-amap>
  </div>
  <div class="bottom">
    <n-button type="primary" @click="genLine">开车去</n-button>
  </div>
</template>
<style lang="scss">
.amap-sug-result {
  z-index: 100000000;
}
.el-dialog {
  border-radius: 10px !important;
}
.map-dialog {
  overflow: hidden;
  .el-dialog__header {
    height: 54px;
    line-height: 54px;
  }

  .el-dialog__footer {
    padding-bottom: 15px !important	;
  }
  .el-dialog__body {
    padding-top: 0px !important;
  }
}
</style>
<style lang="scss" scoped>
.map-wrapper {
  height: 500px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.input-wrapper {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 200px;
  background-color: rgba($color: #000000, $alpha: 0.8);
  z-index: 100;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 3px;
}
#amap {
  width: 800px;
  height: 500px;
}

.dialog-footer {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.address {
  margin-right: 10px;
}
.position {
  margin-right: 10px;
}
.divider {
  height: 20px;
  width: 2px;
  background-color: #aaa;
  margin: 5px 0px;
}
.bottom {
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
}
</style>
